<template>
  <div class="body">
    <div class="title">
      <el-button type="success" class="add" @click="add"
        ><i class="el-icon-edit"></i>新增用户</el-button
      >
    </div>
    <el-table
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      :tree-props="{ children: 'childs', hasChildren: 'pid' }"
      :header-cell-style="{
        background: '#fafafa',
        color: '#909399',
        borderBottom: '2px #ccc solid',
      }"
    >
      <el-table-column label="标题" width="200">
        <template v-slot="{ row }">
          <span v-for="item in spaceNum(row)" :key="item">&emsp;&nbsp;</span>
          <template v-if="row.childs?.length"
            ><i class="el-icon-folder-opened"></i
          ></template>
          <template v-else-if="row.is_point"
            ><i class="el-icon-view"></i
          ></template>
          <template v-else><i class="el-icon-folder"></i></template>
          {{ row.title }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="权限点代码" />
      <el-table-column prop="address" label="操作" fixed="right" width="120">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(row.id)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <MenuAdd
      ref="addForm"
      :text="title"
      :id="id"
      @handleCloseModal="handleCloseModal"
      @newDataes="newDataes"
    />
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import MenuAdd from '../components/menu-add.vue'
export default {
  components: { MenuAdd },
  data () {
    return {
      tableData: [],
      title: '',
      id: null
    }
  },

  created () {
    this.list()
  },

  methods: {
    add () {
      this.title = '创建'
      this.id = null
      this.$refs.addForm.dialogFormV()
    },
    async list () {
      const { data } = await list()
      this.tableData = []
      data.forEach((i) => {
        this.tableData.push(...this.deep(i))
      })
    },
    edit (id) {
      this.title = '修改'
      this.id = id
      this.$refs.addForm.dialogFormV()
    },
    async del (id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
      await remove({ id })
      this.list()
    },
    deep (arr) {
      arr = [arr]
      const newArr = []
      while (arr.length) {
        const q = arr.shift()
        newArr.push(q)
        if (q.childs || q.points) {
          const child = q.childs || q.points
          child.forEach((item) => arr.unshift(item))
        }
      }
      return newArr
    },
    handleCloseModal () {
      this.$refs.addForm.dialogFormH()
    },
    newDataes () {
      this.list()
    },
    spaceNum (node) {
      let count = 0
      let q = node
      while (q.pid) {
        q = this.tableData.find(i => i.id === q.pid)
        count++
      }
      return count
    }
  }
}
</script>

<style scoped lang="less">
.body {
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
  margin: 10px 20px;
  background-color: #fff;
  color: #303133;
  .alert {
    height: 35px;
    width: 100%;
    padding-left: 16px;
    margin: 15px 0;
    border-radius: 3px;
    background-color: #f4f4f4;
    line-height: 35px;
    color: #909399;
    font-size: 13px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 20px;
  }
  .search {
    display: flex;
    justify-content: space-evenly;
  }
  .isShow {
    display: none;
  }
}
</style>
